<template>
  <div class="page">
    <div class="bento-grid">
      <app-bento-item
        title="数据模块A"
        :style="`grid-column: span 3;background:linear-gradient(135deg, #f6d365 0%, #fda085 100%)`"
      >
        <p>描述文本</p>
      </app-bento-item>

      <!-- 内容多可以设置为3列 -->
      <app-bento-item title="数据模块B" :style="`grid-column: span 3;`"> </app-bento-item>

      <Test />
    </div>
  </div>
</template>
<script setup>
import Test from './Test.vue'
</script>
<style lang="scss" scoped>
.page {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  // grid-auto-rows: minmax(120px, 360px);
  // grid-auto-rows: 300px;
  // grid-auto-rows: minmax(120px, auto);
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
</style>
